<template>
  <div>
    <a-row align="top" style="margin-bottom: 20px">
      <a-col :lg="{ span: 5, offset: 1 }" :md="{ span: 10, offset: 1 }">
        <a-card title="用户总量" hoverable>
          <a-tooltip slot="extra" placement="topLeft" title="显示总用户量">
            <a-icon type="info-circle" />
          </a-tooltip>
          <a-statistic
            title="总用户量"
            :value="siteInfo.users"
            style="margin-right: 50px"
          />
        </a-card>
      </a-col>
      <a-col :lg="{ span: 5, offset: 1 }" :md="{ span: 10, offset: 1 }">
        <a-card title="用户总量" hoverable>
          <a-tooltip slot="extra" placement="topLeft" title="本月新增用户比">
            <a-icon type="info-circle" />
          </a-tooltip>
          <a-statistic
            title="新增用户"
            :value="11.324"
            :precision="2"
            suffix="%"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <template #prefix>
              <a-icon type="arrow-up" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :lg="{ span: 5, offset: 1 }" :md="{ span: 10, offset: 1 }">
        <a-card title="运行时长" hoverable>
          <a-tooltip slot="extra" placement="topLeft" title="博客运行时长">
            <a-icon type="info-circle" />
          </a-tooltip>
          <a-statistic
            title="Day Level"
            style="font-size: 10px"
            :value="
              time.daysRound +
              '天' +
              time.hoursRound +
              '时' +
              time.minutesRound +
              '分' +
              time.secondsRound +
              '秒'
            "
          />
        </a-card>
      </a-col>
      <a-col :lg="{ span: 5, offset: 1 }" :md="{ span: 10, offset: 1 }">
        <a-card title="文章总量" hoverable>
          <a-tooltip slot="extra" placement="topLeft" title="总文章数">
            <a-icon type="info-circle" />
          </a-tooltip>
          <a-statistic
            title="总文章量"
            :value="siteInfo.article"
            style="margin-right: 50px"
          />
        </a-card>
      </a-col>
    </a-row>
    <a-row type="flex" justify="space-around">
      <a-col :lg="{ span: 14 }" :xs="{ span: 24 }">
        <a-card title="最新动态">
          <a-list :data-source="dynamicList">
            <a-list-item slot="renderItem" slot-scope="item, index">
              <a-list-item-meta :description="item.time">
                <span slot="title">{{ item.username }}</span>
                <a-avatar
                  slot="avatar"
                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                />
              </a-list-item-meta>
              <div class="list_content">
                {{ item.content }}
              </div>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
      <a-col :lg="{ span: 8 }" :xs="{ span: 24 }">
        <a-card title="热门搜索">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-statistic
                title="次数"
                :value="searchTime"
                style="margin-right: 50px"
              >
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic title="排名" :value="9" class="demo-class">
                <template #suffix>
                  <span> / 100</span>
                </template>
              </a-statistic>
            </a-col>
          </a-row>
          <a-row>
            <a-table
              :data-source="keyWordList"
              :rowKey="(record) => record.no"
              :columns="keyWordColumns"
              :scroll="{ x: 300 }"
            >
              <template slot="up" slot-scope="title, record">
                {{ title }}
              </template>
            </a-table>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  created() {
    this.getSiteInfo();
    this.getLogList();
    setInterval(() => {
      this.getDuration();
    }, 1000);
  },
  data() {
    return {
      createTime: new Date("2022/04/30 12:00:00"),
      time: {
        daysRound: 0,
        hoursRound: 0,
        minutesRound: 0,
        secondsRound: 0,
      },
      // 日志信息
      dynamicList: [],
      // 关键词排行
      keyWordColumns: [
        {
          title: "排行",
          dataIndex: "no",
        },
        {
          title: "关键词",
          dataIndex: "name",
        },
        {
          title: "搜索量",
          dataIndex: "users",
        },
      ],
      keyWordList: [
        {
          no: "1",
          name: "博客",
          users: 234,
          fixed: "left",
        },
        {
          no: "2",
          name: "vue",
          users: 32,
        },
        {
          no: "3",
          name: "闲聊",
          users: 12,
        },
        {
          no: "4",
          name: "其他",
          users: 6,
        },
        {
          no: "5",
          name: "小程序 ",
          users: 3,
        },
      ],
      // 网站统计信息
      siteInfo: {
        article: 0,
        comment: 0,
        users: 0,
      },
      searchTime: 324,
    };
  },
  methods: {
    getDuration() {
      const my_time = new Date().getTime() - this.createTime;
      var daysRound = Math.floor(my_time / 1000 / 60 / 60 / 24);
      var hoursRound = Math.floor(my_time / 1000 / 60 / 60 - 24 * daysRound);
      var minutesRound = Math.floor(
        my_time / 1000 / 60 - 24 * 60 * daysRound - 60 * hoursRound
      );
      var secondsRound = Math.floor(
        my_time / 1000 -
          24 * 60 * 60 * daysRound -
          60 * 60 * hoursRound -
          60 * minutesRound
      );
      this.time = { daysRound, hoursRound, minutesRound, secondsRound };
    },
    // 获取网站配置
    getSiteInfo() {
      this.$axios.get("/api/util/siteInfo.php").then((res) => {
        const { data } = res.data;
        this.siteInfo = data;
      });
    },
    // 获取日志信息
    getLogList() {
      this.$axios.get("/api/util/loglist.php").then((res) => {
        const { data } = res;
        if (data.code === 1) {
          this.dynamicList = data.data;
        } else {
          this.$message.error("获取日志信息失败");
        }
      });
    },
  },
};
</script>

<style>
p {
  text-align: center;
}
.ant-statistic-content-value {
  font-size: 15px;
}
.ant-col {
  margin-top: 10px;
}
</style>
